import { Divider, Space, DatePicker, Button, Select, InputNumber, Input } from 'antd';
import styles from './index.less';
import React, { useState } from 'react';
import moment from 'moment-timezone';

const { RangePicker } = DatePicker;



const timeZoneList = [{
    name: "中国上海(Asia/Shanghai)",
    value: "Asia/Shanghai"
}, {
    name: "日本东京(Asia/Tokyo)",
    value: "Asia/Tokyo"
}, {
    name: "美国纽约(America/New_York)",
    value: "America/New_York"
}, {
    name: "英国伦敦(Europe/London)",
    value: "Europe/London"
}, {
    name: "俄罗斯莫斯科(Europe/Moscow)",
    value: "Europe/Moscow"
}, {
    name: "加拿大多伦多(America/Toronto)",
    value: "America/Toronto"
}
]

class TimestampTool extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            nowDate: moment(),
            stampToDate: moment(),
            stampToDateValue: moment().valueOf(),
            stampToDateValueMill: "mill",
            currentTz: moment.tz.guess(),
            stampToDateSecond: null,
            stampToDateSecondDate: "",
            stampToDateSecondMill: "mill",
            dayPeriod: 0,
            targetDate: {
                direct: "front",
                step: "day",
                number: 0,
                startDate: moment()
            }
        };
    }

    componentDidMount() {

        this.timerID = setInterval(
            () => this.tick(),
            1000
        );
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    tick() {
        this.setState({
            nowDate: moment()
        });
    }

    onTzChange = (value) => {
        console.log(value)
        moment.tz.setDefault(value);
        this.setState({
            currentTz: value,
            nowDate: moment(),
            stampToDate: moment(),
            stampToDateValue: moment().valueOf(),
        })

    }


    onStampToDateStame = (value) => {
        value.persist()
        this.setState({
            stampToDateSecond: value.target.value
        })
    }

    changeTimeStameFormat = (data) => {
        let stampToDateValueMill = data.stampToDateValueMill ? data.stampToDateValueMill : this.state.stampToDateValueMill;
        let stampToDate = data.stampToDate ? data.stampToDate : this.state.stampToDate;
        if (stampToDateValueMill === "mill") {
            this.setState({
                stampToDateValue: stampToDate.valueOf()
            })
        } else {
            this.setState({
                stampToDateValue: Math.floor(stampToDate.valueOf() / 1000)
            })
        }
    }

    renderMillSelect =
        (<Select defaultValue="mill" onChange={(value) => {
            this.setState({
                stampToDateSecondMill: value
            })
        }}>
            <Select.Option value="second">秒</Select.Option>
            <Select.Option value="mill">毫秒</Select.Option>
        </Select>);
    ;

    renderDatePeriod = () => {
        return (<Space>
            <div>时间间隔：   </div>
            <RangePicker onChange={((moment) => {
                this.setState({
                    dayPeriod: (moment[1].diff(moment[0], "day"))
                })
            })}></RangePicker>
            <div>间隔：{this.state.dayPeriod}天</div>
        </Space>);
    }

    renderDateCal = () => {
        return (<Space>
            <div>时间计算：   </div>
            <DatePicker onChange={((moment) => {
                this.setState({
                    targetDate: {
                        ...this.state.targetDate,
                        startDate: moment
                    }
                })
            })}></DatePicker>
            <Select defaultValue="front" onChange={(value) => {
                this.setState({
                    targetDate: {
                        ...this.state.targetDate,
                        direct: value
                    }
                })
            }}>
                <Select.Option value="front">向前</Select.Option>
                <Select.Option value="back">向后</Select.Option>
            </Select>
            <InputNumber onChange={(event) => {
                this.setState({
                    targetDate: {
                        ...this.state.targetDate,
                        number: event
                    }
                })
            }}></InputNumber>
            <Select defaultValue="day" onChange={(value) => {
                this.setState({
                    targetDate: {
                        ...this.state.targetDate,
                        step: value
                    }
                })
            }}>
                <Select.Option value="day">天</Select.Option>
                <Select.Option value="week">周</Select.Option>
                <Select.Option value="month">月</Select.Option>
                <Select.Option value="year">年</Select.Option>
            </Select>
            <div>天，</div>
            <Button type="primary" onClick={() => {
                const targetDate = this.state.targetDate;
                console.log(targetDate.startDate)
                const targetDateValue =targetDate.startDate.clone();
                if (targetDate.direct == "front") {
                    targetDate.value = targetDateValue.add(targetDate.number,targetDate.step);
                } else {
                    targetDate.value = targetDateValue.subtract(targetDate.number,targetDate.step);
                }
                this.setState({
                    targetDate: targetDate
                })
            }}>是</Button>
            <div> ：{this.state.targetDate.value?this.state.targetDate.value.format("yyyy-MM-DD HH:mm:ss"):""}</div>
        </Space>)
    }
    render() {
        return (<div className={styles.container}>

            <Space>
                <div>当前时区：</div>
                <div className={styles.currentTimeStame} style={{ width: 200 }}>{this.state.currentTz}</div>
                <div>当前时区：</div>
                <Select defaultValue={this.state.currentTz} onChange={this.onTzChange}>
                    {
                        timeZoneList.map(item => {
                            return (<Select.Option value={item.value} key={item.value}>{item.name}</Select.Option>)
                        })
                    }
                </Select>
            </Space>
            <Divider></Divider>
            <Space>
                <div>现在：</div>
                <div className={styles.currentTimeStame}>{this.state.nowDate.format("yyyy-MM-DD HH:mm:ss Z")}</div>
                <div>时间戳：</div>
                <div className={styles.currentTimeStame}>{this.state.nowDate + ""}</div>
            </Space>
            <Divider></Divider>

            <Space>
                <div>时间转时间戳：</div>
                <DatePicker showTime showTime defaultValue={moment} onChange={
                    (value) => {
                        if (value) {
                            this.setState({
                                stampToDate: value,
                                stampToDateValue: value.valueOf(),
                            })
                        }
                        this.changeTimeStameFormat({ stampToDate: value })
                    }
                } />:
                <div className={styles.currentTimeStame} style={{ width: 200 }}> {this.state.stampToDateValue}</div>
                <Select defaultValue="mill" onChange={
                    (value) => {
                        this.setState({
                            stampToDateValueMill: value,
                        })
                        this.changeTimeStameFormat({ stampToDateValueMill: value })
                    }
                }>
                    <Select.Option value="second">秒</Select.Option>
                    <Select.Option value="mill">毫秒</Select.Option>
                </Select>
            </Space>
            <Divider></Divider>

            <Space>
                <div>时间戳转时间：</div>
                <Input type="number" addonAfter={this.renderMillSelect} style={{ width: 260 }} onChange={this.onStampToDateStame} ></Input>
                <Button type="primary" onClick={
                    () => {
                        let stampToDateSecondMill = this.state.stampToDateSecondMill;
                        console.log(stampToDateSecondMill)
                        if (stampToDateSecondMill == "second") {
                            this.setState({
                                stampToDateSecondDate: moment(Number(this.state.stampToDateSecond) * 1000).format("yyyy-MM-DD HH:mm:ss Z")
                            })
                        } else {
                            this.setState({
                                stampToDateSecondDate: moment(Number(this.state.stampToDateSecond)).format("yyyy-MM-DD HH:mm:ss Z")
                            })
                        }

                    }
                }>转换</Button>
                <div className={styles.currentTimeStame}>{this.state.stampToDateSecondDate}</div>
            </Space>
            <Divider></Divider>
            <div>
                {this.renderDatePeriod()}
            </div>
            <Divider></Divider>
            <div>
                {this.renderDateCal()}
            </div>
            <Divider></Divider>
        </div>
        )
    }
}

export default TimestampTool;